<template>
    <div class="wrap">
        <div style="width: 500px; margin-top: -300px">
            <el-autocomplete
                    size="large"
                    type="text"
                    style="width: 100%;"
                    placeholder="股票代码"
                    v-model="code"
                    show-word-limit
                    autofocus
                    :fetch-suggestions="codeSearch"
                    :trigger-on-focus="false"
                    @select="handleSelect"
                    @keyup.enter.native="handleEnter"
            >
            </el-autocomplete>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Stock",
        data(){
            return{
                code:"",
                all:[]
            }
        },
        methods:{
            handleEnter(){
                this.code = this.code.trim();
                if(this.code.length == 6){
                    this.go(this.code);
                }
            },
            go(code){
                this.$router.push("/list/" + code);
            },

            handleSelect(item){
                var i = item.value.indexOf(" ");
                if(i > -1){
                    this.go(item.value.substring(0, i))
                }
            },
            codeSearch(queryString, cb){
                cb(this.all.filter(e => e.value.includes(queryString)));
                // this.code = this.code.trim();
                // if(this.code.length < 4){
                //     cb()
                //     return
                // }
                // this.timer = setTimeout(() => {
                //     this.timer = null;
                //     $.get("/api/search/suggest", {code: this.code})
                //     .then(json => {
                //         cb(json.data || []);
                //     });
                // },100);
            }
        },
        mounted() {
            $.get("/api/search/suggest" )
                .then(json => {
                    this.all = (json.data || []);
                });
        }
    }
</script>

<style scoped>
    .wrap{
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>